<template>
    <div>
        <van-sticky>
            <van-nav-bar title="商品列表" left-text="返回" right-text="新建" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
        </van-sticky>
        <van-tabs v-model="bookIs">
            <van-tab title="我创建的"></van-tab>
            <van-tab title="我买到的"></van-tab>
            <van-tab title="我卖出的"></van-tab>
        </van-tabs>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-swipe-cell justify="space-between" style="height:90px" v-for="item in bookList" :key="item.bookNumber">
                    <div @click="onClick(item)">
                        <van-col span="14">
                            <P align="center" style="height:15px" v-text="item.name"></P>
                            <P style="height:50px" v-text="item.summary"></P>
                            <div style="height:15px;display:flex;justify-content: flex-end;">
                                价格:{{item.bookPrice}}
                                <van-tag plain v-if="item.status==0">创建中</van-tag>
                                <van-tag plain type="warning" v-if="item.status==1">待发货</van-tag>
                                <van-tag plain type="primary" v-if="item.status==2">发货中</van-tag>
                                <van-tag plain type="success" v-if="item.status==3">已完成</van-tag>
                                <van-tag plain type="danger" v-if="item.status==4">已取消</van-tag>
                            </div>
                        </van-col>
                        <van-col span="1"> <img :src="item.pictureUrl" height="80px" width="140px"></van-col>
                    </div>
                    <template #right v-if="(bookIs ==0) ||(bookIs ==1 && item.status==1)||(bookIs ==1 && item.status==2)||(bookIs ==2 && item.status==1)">
                        <van-button v-if="(bookIs ==0)" square type="danger" text="删除" @click="onDel(item)" />
                        <van-button v-if="(bookIs ==0)" square type="primary" text="修改" @click="onEdit(item)" />

                        <van-button v-if="bookIs ==1 && item.status==1" square type="danger" text="取消" @click="onCancle(item)" />
                        <van-button v-if="bookIs ==1 && item.status==2" square type="primary" text="确认收货" @click="onReceipt(item)" />

                        <van-button v-if="bookIs ==2 && item.status==1" square type="danger" text="取消" @click="onCancle(item)" />
                        <van-button v-if="bookIs ==2 && item.status==1" square type="primary" text="确认发货" @click="onShipments(item)" />
                    </template>
                </van-swipe-cell>
            </van-list>
        </van-pull-refresh>
        <van-dialog v-model="show" show-cancel-button @confirm="onConfirm()">
            <van-field label="收货人" v-model="user.name" readonly />
            <van-field label="电话" v-model="user.phone" readonly />
            <van-field label="地址" v-model="user.userAddress" readonly />
            <van-field label="快递单号" v-model="trackingNumber" />

        </van-dialog>
        <div style="height:50px"></div>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name: 'bookList',
    data() {
        return {
            show: false,
            bookIs: 0,
            bookList: [],
            bookId: 0,
            trackingNumber: "",
            user: {},
            loading: false,
            finished: false,
            refreshing: false,
            // 一页多少条记录
            size: 10,
            // 当前页
            current: 1,
            // 总页数
            pages: 1,
            // 总数量
            total: 0,
        }
    },
    watch: {
        bookIs() {
            // 对路由变化作出响应...
            window.console.log(this.bookIs)
            this.bookList = [];
            // 激活下拉刷新(手动)因为是手动所以不会清理掉列表信息
            this.onRefresh()
        }
    },
    mounted() {
    },
    methods: {

        onClickLeft() {
            // Toast('返回');
            this.$router.go(-1);//返回上一层
        },
        onClickRight() {
            this.$router.push({ path: this.redirect || '/editCommodity' })
        },
        async onDel(item) {
            window.console.log("点击了删除按钮")
            let res = await this.$http.delBook({ id: item.bookNumber })
            if (res !== undefined && res.meta.status == 200) {
                Toast("删除成功")
                //表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
                this.bookList.splice(this.bookList.indexOf(item), 1);
            }
        },
        onEdit(item) {
            this.$router.push({ path: this.redirect || '/editCommodity', query: { id: item.bookNumber } })
            window.console.log("点击了修改按钮")
        },
        async onCancle(item) {
            window.console.log("点击了取消按钮")
            let res = await this.$http.CancelBook({ id: item.bookNumber })
            if (res !== undefined && res.meta.status == 200) {
                Toast("取消成功")

                this.bookList = [];
                // 激活下拉刷新(手动)因为是手动所以不会清理掉列表信息
                this.onRefresh()
            }
        },
        async onReceipt(item) {
            window.console.log("点击了确认收货按钮")
            let res = await this.$http.ReceiptBook({ id: item.bookNumber })
            if (res !== undefined && res.meta.status == 200) {
                Toast("收货成功")

                this.bookList = [];
                // 激活下拉刷新(手动)因为是手动所以不会清理掉列表信息
                this.onRefresh()
            }
        },
        async onShipments(item) {
            item

            this.bookId = item.bookNumber
            //   window.console.log("点击了确认发货按钮")
            let res = await this.$http.getBookByBuyer(item.bookNumber)
            this.user = res.data
            this.show = true
        },
        // 发货再次确认
        async onConfirm() {
            let data = {
                id: this.bookId,
                trackingNumber: this.trackingNumber
            }
            let res = await this.$http.ShipmentsBook(data)
            if (res !== undefined && res.meta.status == 200) {
                Toast("发货成功")
                this.bookList = [];
                // 激活下拉刷新(手动)因为是手动所以不会清理掉列表信息
                this.onRefresh()
            }
            //  window.console.log("点击了确认发货按钮")
        },
        async onLoad() {
            if (this.refreshing) {
                this.bookList = [];
                this.refreshing = false;
            }
            let data = {}
            let res = {}

            // 如果是从用户进入
            data = this.bookIs + "/" + this.current + "/" + this.size
            res = await this.$http.getBookByUser(data)

            this.pages = res.data.pages
            this.total = res.data.total
            // 加载状态结束
            for (let i = 0; i < res.data.records.length; i++)
                this.bookList.push(res.data.records[i])
            this.loading = false;

            // 数据全部加载完成
            if (this.current >= this.pages) {
                this.finished = true;
            }
            this.current = res.data.current + 1
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;

            // 一页多少条记录
            this.size = 10
            // 当前页
            this.current = 1
            // 总页数
            this.pages = 1
            // 总数量
            this.total = 0

            this.onLoad();
        },
        onClick(item) {
            window.console.log(item)
            this.$router.push({ path: this.redirect || '/commodity', query: { id: item.bookNumber } })
        }
    }
}




</script>

<style >
</style>